<template>
  <div class="item-box">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        status-icon
    >
      <component  :is="getWidgetName(props.dataItem.tag)" :dataItem="props.dataItem"
                  :key="props.index">
      </component>
    </el-form>
<!--    <inputWidget></inputWidget>-->

  </div>
</template>

<script setup lang="ts">
import Demo3 from '../components/DraggableItem.jsx'
import {h, defineComponent, defineProps, ref, resolveComponent, reactive, defineAsyncComponent} from 'vue'
import {ElForm, ElButton, ElInput} from 'element-plus'

// const inputWidget = defineAsyncComponent(() => import('../components/form-designer/form-widget/field-widget/input-widget.vue'));

const props = defineProps({
  // 搜索表单
  dataItem: {
    type: Object,
    default: () => {
    },
  },
  index: {
    type: Number,
    default: 0,
  }
});
const getWidgetName = (widgetType) => {
  widgetType = widgetType.substring("el-".length)
  return widgetType + '-widget'
}
// const state = reactive({
//   widget:
//       {
//         "key": 29248,
//         "type": "input",
//         "icon": "text-field",
//         "formItemFlag": true,
//         "options": {
//           "name": "input90353",
//           "label": "input",
//           "labelAlign": "",
//           "type": "text",
//           "defaultValue": "",
//           "placeholder": "",
//           "columnWidth": "200px",
//           "size": "",
//           "labelWidth": null,
//           "labelHidden": false,
//           "readonly": false,
//           "disabled": false,
//           "hidden": false,
//           "clearable": true,
//           "showPassword": false,
//           "required": false,
//           "requiredHint": "",
//           "validation": "",
//           "validationHint": "",
//           "customClass": [],
//           "labelIconClass": null,
//           "labelIconPosition": "rear",
//           "labelTooltip": null,
//           "minLength": null,
//           "maxLength": null,
//           "showWordLimit": false,
//           "prefixIcon": "",
//           "suffixIcon": "",
//           "appendButton": false,
//           "appendButtonDisabled": false,
//           "buttonIcon": "custom-search",
//           "onCreated": "",
//           "onMounted": "",
//           "onInput": "",
//           "onChange": "",
//           "onFocus": "",
//           "onBlur": "",
//           "onValidate": "",
//           "onAppendButtonClick": ""
//         },
//         "id": "input90353"
//       }
//
// })
// const renderView = {
//   render: () => {
//     const children = [];
//     let json = {
//       "attrs": {
//         "label": "手机号",
//         "placeholder": "请输入手机号",
//         "span": 24,
//         "maxlength": 11,
//         "readonly": false,
//         "disabled": false,
//         "required": true
//       },
//       "props": {
//         "layout": "colFormItem",
//         "tagIcon": "input",
//         "value": "",
//         "formId": 6,
//         "tag": "el-input",
//         "defaultValue": "",
//         "clearable": true,
//         "prepend": "",
//         "append": "",
//         "prefix-icon": "el-icon-mobile",
//         "suffix-icon": "",
//         "show-word-limit": true,
//         "changeTag": true,
//         "regList": [{"pattern": "/^1(3|4|5|7|8|9)\\d{9}$/", "message": "手机号格式错误"}]
//       },
//       "on": {},
//       "style": {"width": "100%"}
//     }
//     // return h(
//     //     // 1. 要渲染的标签名称：第一个参数【必需】
//     //     resolveComponent(props.dataItem.tag) ,
//     //     // 2. 渲染标签的属性：第二个参数【可选】
//     //     json,
//     //     // 3. 渲染标签的子元素数组：第三个参数【可选】
//     //     [
//     //       // "render函数文本" 文本内容可以直接写入
//     //      h( props.dataItem.tag, num.value), // h()创建的VNodes
//     //     ]
//     // );
//     return h(
//         // 1. 要渲染的标签名称：第一个参数【必需】
//         resolveComponent("el-form"),
//         // 2. 渲染标签的属性：第二个参数【可选】
//         {},
//         // 3. 渲染标签的子元素数组：第三个参数【可选】
//         [
//           // "render函数文本" 文本内容可以直接写入
//           h(resolveComponent('el-form-item'), {
//             label: props.dataItem.label,
//             required: true,
//             // attrs:{"label":"手机号","placeholder":"请输入手机号","span":24,"maxlength":11,"readonly":false,"disabled":false,"required":true}
//             // onClick: 0,
//           }, [
//             h(resolveComponent(props.dataItem.tag), {
//               required: true,
//               value: props.dataItem.value,
//               placeholder: props.dataItem.placeholder,
//               // attrs:{"label":"手机号","placeholder":"请输入手机号","span":24,"maxlength":11,"readonly":false,"disabled":false,"required":true}
//               onInput: (e) => {
//                 props.dataItem.value = e
//               }
//             }, [])
//           ]), // h()创建的VNodes
//         ]
//     );
//   },
// };


</script>
<style lang="scss" scoped>
.item-box{
  border: 1px dashed #f6f7ff;
  cursor: move
}
</style>
